<template>
	<view>
		<scroll-view :scroll-x="true" :show-scrollbar="false">
			<view class="tag-menu">
				<view :class="active==1?'active':''" @click="tab(1,0)">排行榜</view>
				<view :class="active==2?'active':''" @click="tab(2,1)">关注商品</view>
				<view :class="active==3?'active':''" @click="tab(3,2)">流失商品</view>
				<view :class="active==4?'active':''" @click="tab(4,3)">推荐商品</view>
			</view>
		</scroll-view>
		<mescroll-uni @init="mescrollInit" :height="height" :down="downOption" @down="refresh" :up="upOption"
			@up="getData">
			<view class="main">
				<view class="top" v-for="(item,index) in datas">
					<view class="rank-icon">
						<image v-if="index==0" src="../../static/rankings1.jpg"></image>
						<image v-if="index==1" src="../../static/rankings2.jpg"></image>
						<image v-if="index==2" src="../../static/rankings3.jpg"></image>
						<view v-if="index > 2">{{index+1}}</view>
					</view>
					<image :src="easyGetImgUrl(item.ProductImage)" mode="aspectFill"></image>
					<view class="name">
						<view class="text-show-line-2">{{item.Name}}</view>
						<view class="product-price"><text>￥</text>
							<view>{{item.Price}}</view>
						</view>
						<view class="rank-time" v-if="item.Time && active==2">查看时间：{{item.Time}}</view>
						<view class="rank-time" v-if="item.Time && active==3">购买时间：{{item.Time}}</view>
					</view>
				</view>
			</view>
		</mescroll-uni>
	</view>
</template>

<script>
	import {
		agenttracklist,
		UserGoodList
	} from "@/service/api/erp.js"
	import storage from "@/uni-sub-base/utils/storage.js"
	export default {
		props: {
			data: {
				type: Array,
				default: []
			},
			StoreUserId: {
				type: String
			},
			height: {
				type: String,
				default: '100px'
			},

		},
		data() {
			return {
				datas: [],
				storeId: '',
				numlist:{
					TotalNum:0,
					PorductNum:0,
					MallNum:0,
					VideoNum:0,
					AticleNum:0,
				},
				active:1,
				param: {
					type:0,
				},
				height1:''
			}
		},
		mounted() {
			this.height1 = parseInt(this.height)-48+'px';
			console.log(this.height1)
			this.storeId = storage.getCache('businessCode')
			this.refresh()
		},
		onShow() {},
		methods: {
			tab(num,type){
				if(this.active != num){
					this.active = num;
					this.param.type = type;
					this.refresh()
				}
				
			},
			refresh() {
				this.datas = []
				this.mescroll.resetUpScroll()
			},
			getData(page) {
				let param = this.param
				param.pageSize = page.size
				param.pageIndex= page.num
				param.userId = this.StoreUserId
				UserGoodList(param).then(res => {
					if (res.State==1) {
						this.total = 10;
						this.mescroll.endBySize(res.Data.length, 10);
						this.datas = this.datas.concat(res.Data)
					}else{
						this.easyToast(res.Msg)
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.main {
		background: #FFFFFF;
		border-radius: 8rpx;
		margin: 24rpx;

		.top {
			display: flex;
			position: relative;
			padding: 24rpx;
			justify-content: flex-start;
			align-items: center;

			// border-bottom: 1rpx solid #EBEBEB;
			image {
				width: 148rpx;
				height: 148rpx;
				margin-right: 24rpx;
				border-radius: 8rpx;
				flex-shrink: 0;
			}
			.rank-icon{
				width:50rpx;
				height:50rpx;
				text-align: center;
				font-size: 30rpx;
				font-weight: 600;
				color: #999;
				margin-right: 24rpx;
				image{
					width:50rpx;
					height:50rpx;
				}
			}
			.videoicon{
				width: 148rpx;
				height: 148rpx;
				position: absolute;
				left: 24rpx;
				top: 24rpx;
				background: rgba(0, 0, 0, 0.5);
				border-radius: 8rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				image{
					width: 56rpx;
					height: 56rpx;
					margin-right: 0rpx;
				}
			}
			.name {
				display: flex;
				flex: 1;
				height: 148rpx;
				flex-direction: column;
				justify-content: space-around;
				font-size: 30rpx;
				.product-price {
					display: flex;
					align-items: baseline;
					color: $app-color-main;
					font-size: 36rpx;

					text {
						color: $app-color-main;
						font-size: 20rpx;
					}
					view{
						font-weight: bold;
					}
				}
			}

			.label {
				width: 96rpx;
				height: 96rpx;
				top: 0;
				right: -24rpx;
				position: absolute;
			}

		}

		.bottom {
			color: $color-gray-3;
			padding: 12rpx 24rpx 24rpx 24rpx;
			font-size: 24rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.share {
				display: flex;
				justify-content: flex-start;

				view {
					margin-right: 30rpx;
					text{
						font-size: 26rpx;
						// font-weight: bold;
					}
				}
				
			}
		}

		.tag-menu {
			display: flex;
			justify-content: flex-start;
			padding-left: 24rpx;
			margin: 10px 0 24rpx 0;

			view {
				height: 52rpx;
				background: rgba(196, 24, 31, 0.1);
				border-radius: 26rpx;
				margin-right: 20rpx;
				font-size: 26rpx;
				padding: 0rpx 26rpx;
				color:$app-color-main;
				display: flex;
				justify-content: center;
				align-items: center;
				white-space: nowrap;
			}

			.active {
				background:$app-color-main;
				color: #FFFFFF;
			}

		}
	}

.rank-time{
	color:#666;
	font-size: 24rpx;
}
</style>
